<template>
<div>
     <h4>transition</h4>
     <hr>
     常规用法：
     <button @click="showBox1 = !showBox1">切换</button>
     <transition name="fade">
         <div class="box1" v-if="showBox1"></div>
     </transition>
     
     <hr>
     自定义类——animation.css用法：
     <button @click="showBox2 = !showBox2">切换</button>
     <transition
     enter-from-class="my-enter-from"
     enter-active-class="my-enter-active"
     enter-to-class="my-enter-to"
     leave-from-class="my-leave-from"
     leave-active-class="my-leave-active"
     leave-to-class="my-leave-to"
     >
         <div class="box2" v-if="showBox2"></div>
     </transition>


      <hr>

       自定义类——animation.css用法：
     <button @click="showBox3 = !showBox3">切换</button>
     <transition
     enter-active-class="animate__animated animate__bounce"
     leave-active-class="animate__animated animate__backOutRight"
     :duration="{ enter: 500, leave: 800 }"
     >
         <div class="box2" v-if="showBox3"></div>
     </transition>


     <hr>

       生命周期用法：
     <button @click="showBox4 = !showBox4">切换</button>
     <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @enter-cancelled="enterCancelled"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave"
        @leave-cancelled="leaveCancelled"
     >
         <div class="box2" v-if="showBox4"></div>
     </transition>


     <hr>

       appeal用法：
     <button @click="showBox5 = !showBox5">切换</button>
     <transition 
        appear-active-class="appear-active"
        appear-from-class="appear-from"
        appear-to-class="appear-to"
        appear
     >
         <div class="box2" v-if="showBox5"></div>
     </transition>
</div>

</template>
    
<script setup lang='ts'>
import { ref } from "vue";
import 'animate.css';
import gsap from 'gsap';
    let showBox1 = ref(true);
    let showBox2 = ref(true);
    let showBox3 = ref(true);
    let showBox4 = ref(true);
    let showBox5 = ref(true);


    let beforeEnter = (el: Element) => {
        console.log('对应enter-from:', el);
        gsap.set(el, {
            width: 0,
            height: 0,
        })
    };
    let enter = (el: Element, done: gsap.Callback) => {
        console.log(' 对应enter-active:', el);
        // setTimeout(() => {
        //     done();
        // }, 3000);

        gsap.to(el, {
            width: 200,
            height: 200,
            onComplete: done
        })
    };
    let afterEnter = (el: Element) => {
        console.log('对应enter-to:', el);
    };
    let enterCancelled = (el: Element) => {
        console.log('显示过度打断', el);
    };
    let beforeLeave = (el: Element) => {
        console.log('对应leave-fromm:', el);
    };
    let leave = (el: Element, done: gsap.Callback) => {
        console.log('对应enter-active:', el);
        //  setTimeout(() => {
        //     done();
        // }, 6000);
         gsap.to(el, {
            width: 0,
            height: 0,
            onComplete: done
        })
    };
    let afterLeave = (el: Element) => {
        console.log('对应leave-to:', el);
    };
    let leaveCancelled = (el: Element) => {
        console.log('离开过度打断:', el);
    };
</script>
    
<style>
/* 常规用法 */
    .box1 {
        width: 1rem;
        height: 1rem;
        background-color: red;
    }
    .fade-enter-from {
        width: 0;
        height: 0;
    }
    .fade-enter-active {
        transition: all 1s linear;
    }
    .fade-enter-to {
        width: 1rem;
        height: 1rem;
        background-color: rgb(0, 0, 0);
    }
    .fade-leave-from {
        width: 1rem;
        height: 1rem;
        background-color: rgb(19, 175, 84);
    }
    .fade-leave-active {
        transition: all .5s ease-in;
    }
    .fade-leave-to {
        width: 0rem;
        height: 0rem;
        background-color: rgb(46, 42, 144);
    }

    /* 自定义类使用 */
    .box2 {
        width: .5rem;
        height: .5rem;
        background-color: black;
    }
    .my-enter-from {
        width: 0;
        height: 0;
        background-color: antiquewhite;
    }
    .my-enter-active {
        transition: all 1s linear;
    }
    .my-enter-to {
        width: .5rem;
        height: .5rem;
        background-color: rgb(195, 115, 10);
    }
    .my-leave-from {
        width: 1rem;
        height: 1rem;
        background-color: rgb(17, 52, 167);
    }
    .my-leave-active {
        transition: all 3s ease-in-out;
    }
    .my-leave-to {
        opacity: .6;
        background-color: rgb(140, 19, 120);
    }

    /* appeal */
    .appear-active {
        transition: all 1s ease;
    }
     .appear-from {
         width: 0px;
        height: 0px;
        background-color: rgb(120, 164, 23);
    }
     .appear-to {
        width: 330px;
        height: 300;
        background-color: aquamarine;
    }
</style>